<template>
  <d2-container class="goods-content">
    <div class="user-page-form">
      <el-form ref="goodsForm" label-position="top" :rules="rules" :model="goodsForm" size="default">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-input placeholder="请输入内容" v-model="goodsForm.name" class="">
              <template slot="prepend">商品名称</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input placeholder="请输入内容" v-model="goodsForm.goodsNo" class="">
              <template slot="prepend">商品编号</template>
            </el-input>
          </el-col>
          <el-col :span="3">
            <el-button @click="submit" type="primary" class="button-user" icon="el-icon-search">查询</el-button>
          </el-col>
          <el-col :span="3">
            <el-button @click="reset" type="primary" class="button-user"><i class="fa fa-repeat" aria-hidden="true"></i> 重置</el-button>
          </el-col>
          <el-col :span="3">
            <el-button @click="addGoods" type="primary" class="button-user" icon="el-icon-edit">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-progress :percentage="100"></el-progress>
    </div>
    <d2-crud
      :columns="columns"
      :data="goodsList"
      :options="options"
      :loading="loading"
      :pagination="pagination"
      @pagination-current-change="paginationCurrentChange"/>
  </d2-container>
</template>

<script>
import { loadAllGoods } from '@api/sys.goods'
export default {
  data () {
    return {
      goodsForm: {
        name: '',
        goodsNo: ''
      },
      rules: {},
      goodsList: [],
      columns: [
        { title: 'ID', key: 'id', width: 60 },
        { title: '商品名', key: 'name' },
        { title: '编号', key: 'goodsNo' },
        { title: '原价格', key: 'oldPrice' },
        { title: '现价格', key: 'price' },
        { title: '库存', key: 'amount' },
        { title: '描述', key: 'des' },
        { title: '图片', key: 'mainUrl' }
      ],
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      options: {
        border: true
      }
    }
  },
  methods: {
    paginationCurrentChange (currentPage) {
      this.pagination.currentPage = currentPage
      this.fetchData()
    },
    fetchData () {
      this.loading = true
      this.loadData()
    },
    submit () {
      this.loadData()
    },
    loadData () {
      let vm = this
      this.loading = true
      this.goodsForm.pageNum = this.pagination.currentPage
      loadAllGoods(this.goodsForm).then(res => {
        vm.goodsList = res.list
        vm.pagination.total = res.total
        vm.pagination.currentPage = res.pageNum
        this.loading = false
      }).catch(err => {
        console.info(err)
      })
    },
    addGoods () {
      console.info('????')
    },
    reset () {
      this.goodsForm = {}
    }
  }
}
</script>

<style lang="scss">
.menu-content {
  @extend %unable-select;
  $backgroundColor: #F0F2F5;
  // ---
}
</style>
